<template>
  <div>
    <p v-if="columns.length">
      <el-popover
        v-model="visible"
        placement="bottom"
        title=""
        width="200"
        trigger="manual"
      >
        <div class="column-checkbox">
          <div class="checkbox-wrap">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="column in columns"
                :key="column.key"
                :label="column.key"
              >
                {{ column.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <p style="text-align: right">
            <el-button type="primary" size="mini" @click="onCheckColumn"
              >确定</el-button
            >
            <el-button type="info" size="mini" @click="onResetColumn"
              >重置</el-button
            >
          </p>
        </div>
        <button slot="reference" @click="visible = true" id="btnFilterColumn">
          筛选列
        </button>
      </el-popover>
      <el-button type="warning" @click="exportExcel('#anchorListFirst', id)"
        >导出</el-button
      >
    </p>
    <el-table
      id="anchorListFirst"
      v-loading="loading"
      :data="list"
      :height="$attrs.height"
      border
      fit
      size="small"
      highlight-current-row
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      @sort-change="onSortChange"
    >
      <el-table-column
        v-for="column in tableColumns"
        :key="column.key"
        align="center"
        sortable
        :label="column.label"
        :prop="column.key"
        :width="column.width"
        :fixed="column.fixed"
      >
        <template slot-scope="{ row }">
          <template v-if="column.slot">
            <slot :name="column.key" :row="row"></slot>
          </template>
          <template v-else-if="column.filter">
            {{ column.filter(row[column.key]) }}
          </template>
          <template v-else>
            {{ row[column.key] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: []
    },
    columns: {
      type: Array,
      default: []
    },
    sortable: {
      type: Boolean || String,
      default: false
    }
  },
  data() {
    const query = this.$route.query
    return {
      id: query && query.id,
      visible: false,
      checkList: []
    }
  },
  computed: {
    tableColumns() {
      return this.columns.filter(column => {
        return column.visible
      })
    }
  },
  mounted() {
    document.body.addEventListener('click', e => {
      if (e.target.id != 'btnFilterColumn') {
        this.visible = false
      } else {
        this.visible = true
      }
    })
  },
  methods: {
    onCheckColumn() {
      this.columns.forEach(column => {
        if (this.checkList.includes(column.key)) {
          column.visible = true
        } else {
          column.visible = false
        }
      })
      this.visible = false
    },
    onResetColumn() {
      this.columns.forEach(column => {
        column.visible = true
      })
      this.checkList = []
      this.visible = false
    },
    onSortChange(column) {
      this.$emit('onSortChange', column)
    }
  }
}
</script>
<style lang="scss" scoped>
#btnFilterColumn {
  padding: 6px 12px;
  border-radius: 4px;
  background: #1890ff;
  border: none;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  color: #fff;
}
.column-checkbox {
  .checkbox-wrap {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .el-checkbox {
    display: block;
  }
}
</style>
